@import "../../node_modules/andy-ui/src/vue-base/sass/dev";

@import "../app/base/sass/dev";

$aui-layout-grid-gutter: 10px;

@import "media/index";

@mixin app-create-bubble($border-radius, $position: left) {
    & {
        @if $position == left {
            border-radius: 0 $border-radius $border-radius $border-radius;
        }
        @if $position == right {
            border-radius: $border-radius 0 $border-radius $border-radius;
        }
    }
}

@mixin create-b-message-media-extend-message-media() {
    $self: #{&};
    
    &__content {
        padding-bottom: 5px;
        > [app-inner] {        
            -webkit-font-smoothing: antialiased;                 
            color: $aui-brand-dark;    
        }      
        > [app-append] {
            bottom: 5px;
        }             
    }

    &--left {
        #{$self}__content {
            > [app-inner] {
                @include app-create-bubble(10px);            
                background-color: #ffffff;   
                box-shadow: 1px 1px 3px 1px transparentize($aui-brand-info, 0.63);     
            }         
        }
    }

    &--right {
        #{$self}__content {
            > [app-inner] {
                @include app-create-bubble(10px, right);
                background-color: transparentize(lighten($aui-brand-info, 35), 0.6);
                box-shadow: 1px 2px 5px 1px transparentize($aui-brand-info, 0.40);         
            }
        }
    }  
}

@include app-create-message-media() {
    // bilibili style
    @include create-b-message-media-extend-message-media();
}

